<style scoped>
     .Table_B{
        width: 100%;
        height: 54px;
        background-color:#fff;
        margin-bottom:12px;
        border-radius:3px;
    }
    .Table_B ul li{
        float:left;
        margin:10px 5px 0 10px;
    }
    .Table_C{
        margin-top:5px;
        width: 100%;
        height:44px;
        background-color:#fff;
        line-height:44px;
    }
    .Table_C p{
        float:left;
    }
    .page1{
        float:right;
        margin-top:7px;
        margin-right:20px;
    }
</style>

<template>
    <Row type="flex">
        <div class="Table_B">
            <ul>
                <li><i-input icon="ios-search-strong" placeholder="用户名..." style="width: 200px" class="nav_Search"></i-input></li>
                <li><i-input icon="ios-search-strong" placeholder="机构..." style="width: 200px" class="nav_Search"></i-input></li>
                <li><i-button type="primary" icon="ios-search">搜索</i-button></li>
                <li><i-button type="primary" icon="plus-round" @click="modal1 = true">新增</i-button>
                        <Modal
                            :visible.sync="modal1"
                            title="新增用户"
                            @on-ok="ok"
                            @on-cancel="cancel">
                            <i-form v-ref:form-validate :model="formValidate" :rules="ruleValidate" :label-width="80">
                                <Form-item label="用户名" prop="UserName">
                                    <i-input :value.sync="formValidate.UserName" placeholder="请输入用户名"></i-input>
                                </Form-item>
                                <Form-item label="用户代码" prop="UserCode">
                                    <i-input :value.sync="formValidate.UserCode" placeholder="请输入用户代码"></i-input>
                                </Form-item>
                                <Form-item label="电话" prop="Tel">
                                    <i-input :value.sync="formValidate.Tel" placeholder="请输入电话"></i-input>
                                </Form-item>
                                <Form-item label="邮箱" prop="Email">
                                    <i-input :value.sync="formValidate.Email" placeholder="请输入邮箱"></i-input>
                                </Form-item>
                                <Form-item label="组织名" prop="OrganizationName">
                                    <i-select :model.sync="formValidate.OrganizationName" style="width:200px">
                                        <i-option v-for="item in cityList" :value="item.value" :model.sync="formValidate.OrganizationID=item.label">{{ item.label }}</i-option>
                                    </i-select>
                                    <!-- <i-select :model.sync="formValidate.OrganizationName" placeholder="请选择组织名">
                                        <i-option value="beijing">北京市</i-option>
                                        <i-option value="shanghai">上海市</i-option>
                                        <i-option value="shenzhen">深圳市</i-option>
                                    </i-select> -->
                                </Form-item>
                                <Form-item>
                                    <Radio :checked.sync="formValidate.IsEnable" prop="IsEnable">是否启用？</Radio>
                                </Form-item>
                                <Form-item>
                                    <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                                    <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
                                </Form-item>
                            </i-form>
                        </Modal></li>
                <li><i-button type="primary" icon="edit">修改</i-button></li>
            </ul>
        </div>
        <i-table border :content="self" :columns="columns8" :data="data1"></i-table>
        <div class="Table_C">
            <p>共<span style="color:red">{{list}}</span>条记录，当前显示第<span style="color:red">1</span>页</p>
            <div class="page1">
                <Page :total="100"></Page>
            </div>
        </div>
    </Row>
</template>
<script>

    export default {
        ready(){
            //this.uName = sessionStorage.getItem("name");//获取用户名称
            this.getUser();
        },
        data () {
            return {
                model01: '',
                cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    },
                    {
                        value: 'shenzhen',
                        label: '深圳市'
                    }
                ],
                formValidate: {
                    UserName: '',
                    UserCode: '',
                    Tel: '',
                    Email: '',
                    OrganizationName: '',
                    OrganizationID:'',
                    IsEnable: false
                },
                ruleValidate: {
                    UserName: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    userCode: [
                        { required: true, message: '用户代码', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    orz: [
                        { required: true, message: '请选择组织', trigger: 'change' }
                    ],
                    phone: [
                        { required: true, message: '手机号', trigger: 'blur' },
                        { type: 'string', min: 6, message: '电话号不能少于6字符', trigger: 'blur' }
                    ]
                },
                confs:[],
                self: this,
                list:'',
                modal1: false,
                columns8: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '编号',
                        key: 'number'
                    },
                    {
                        title: '用户名',
                        key: 'userName'
                    },
                    {
                        title: '用户代码',
                        key: 'userCode'
                    },
                    {
                        title: '邮箱',
                        key: 'Email'
                    },
                    {
                        title: '电话',
                        key: 'phone'
                    },
                    {
                        title: '组织名',
                        key: 'orz'
                    },
                    {
                        title: '是否启用',
                        key: 'qiyong'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render (row, column, index) {
                            return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                        }
                    }

                ],
                data1:[

                ],
                addList:[

                ],
                removeList:[

                ]
            }
        },
        methods:{
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                       this.$Message.success('提交成功!');
                        //this.formValidate保存的都是数据
                        let userFrom = this.formValidate;
                        var param = JSON.stringify(userFrom);
                        console.log(param);
                        this.postHttpC("/user/add?v=1_13",param)
                            .then(response => {
                                let data = response.body;
                                console.log(data);
                                //var conf;
                                if (data.Code === "0") {
                                    this.addList=data;
                                } else {
                                    console.log("错误路径");
                                }
                            }, (error) => {
                                console.log(error)
                            })

                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            ok () {
                this.$Message.info('保存成功！');
            },
            cancel () {
                this.$Message.info('您取消了保存！');
            },
            show (index) {
                this.$Modal.info({
                    title: '用户信息',
                    content: `用户名：${this.data1[index].userName}<br>邮箱：${this.data1[index].Email}<br>电话：${this.data1[index].phone}`
                })
            },
            remove (index) {
                console.log(index);
                let rmlist = this.data1.splice(index, 1);
                console.log(rmlist);
                let param2 = JSON.stringify(rmlist);
                console.log(param2);
                this.postHttpC("/user/remove?v=1_13",param2)
                    .then(response => {
                        let dataremove = response.body;
                        console.log(dataremove);
                        //var conf;
                        if (dataremove.Code === "0") {
                            this.removeList=dataremove;
                            console.log(this.removeList);
                        } else {
                            console.log("错误路径dataremove");
                        }
                    }, (error) => {
                        console.log(error)
                    })
            },
            getUser: function() {
                var User_Key = localStorage.getItem("UserKey");
                //alert("用户列表")
                //console.log(User_Key);
                this.data1 = [];
                var param = JSON.stringify({

                })
                this.getHttpC("/user/getall?v=1_13",param)
                    .then(response => {
                        let data = response.body;
                        //console.log(data);
                        //var conf;
                        if (data.Code === "0") {
                            this.confs=data.Data;
                            //把data数据传给confs
                            console.log(this.confs);
                            let userList;
                            let k=0;
                            for (var i = 0;this.confs.length; i++) {
                                k++;
                                userList = '{"number":"'+k+'","userName":"'+this.confs[i].UserName+'","userCode":"'+this.confs[i].UserCode+'","phone":"'+this.confs[i].Tel+'","Email":"'+this.confs[i].Email+'","orz":"'+this.confs[i].OrganizationName+'","qiyong":"'+this.confs[i].IsEnable+'"}';
                                    userList=JSON.parse(userList);
                                    this.data1.push(userList)
                                    //console.log(this.data1);
                                    this.list = this.confs.length;
                            }

                             //console.log(this.list);
                            //注释部分消耗性能可以弃用
                            // for(var i=0;i<data.Data.length;i++){
                            //     this.menuList = data.Data;//会议列表对象
                            //     conf='{"ID":"'+this.menuList[i].ID+'","menuName":"'+this.menuList[i].MenuName+'","ParentID":"'+this.menuList[i].ParentID+'"}';
                            //     conf=JSON.parse(conf);
                            //     this.confs.push(conf);
                            //     console.log(conf);
                            //     //console.log(this.confs);
                            // }
                        } else {
                            console.log("错误路径");
                            console.log(data.code);
                        }
                    }, (error) => {
                        console.log(error)
                    })
            }
        }
    }
</script>
